<template>
  <div class="w-full min-h-screen bg-gray-50">
    <div class="py-16">
      <div class="max-w-4xl mx-auto px-4">
        <div class="text-center mb-12">
          <h1 class="text-4xl font-bold text-gray-900 mb-4">
            <i class="fas fa-question-circle text-blue-500 mr-3"></i>
            使用帮助
          </h1>
          <p class="text-xl text-gray-600">
            了解如何使用 Markdown 工具箱的各种功能
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
          <div class="bg-white rounded-lg shadow-sm p-6">
            <h3 class="text-xl font-semibold text-gray-900 mb-4">
              <i class="fas fa-sitemap text-blue-500 mr-2"></i>
              思维导图工具
            </h3>
            <p class="text-gray-600 mb-4">
              将 Markdown 文档转换为交互式思维导图，支持多层级结构和节点折叠。
            </p>
            <ul class="text-sm text-gray-600 space-y-2">
              <li>• 支持 # ## ### 标题层级</li>
              <li>• 实时预览更新</li>
              <li>• 支持 SVG/PNG 导出</li>
              <li>• 可缩放和拖拽</li>
            </ul>
          </div>

          <div class="bg-white rounded-lg shadow-sm p-6">
            <h3 class="text-xl font-semibold text-gray-900 mb-4">
              <i class="fas fa-project-diagram text-green-500 mr-2"></i>
              流程图工具
            </h3>
            <p class="text-gray-600 mb-4">
              基于 Mermaid 语法创建专业的流程图和时序图。
            </p>
            <ul class="text-sm text-gray-600 space-y-2">
              <li>• 支持多种图表类型</li>
              <li>• Mermaid 语法支持</li>
              <li>• 自动布局优化</li>
              <li>• 高清图片导出</li>
            </ul>
          </div>

          <div class="bg-white rounded-lg shadow-sm p-6">
            <h3 class="text-xl font-semibold text-gray-900 mb-4">
              <i class="fas fa-presentation text-purple-500 mr-2"></i>
              PPT 演示文稿
            </h3>
            <p class="text-gray-600 mb-4">
              将 Markdown 转换为精美的 PPT 演示文稿。
            </p>
            <ul class="text-sm text-gray-600 space-y-2">
              <li>• 自动分页处理</li>
              <li>• 多种主题模板</li>
              <li>• 支持图片和代码</li>
              <li>• 在线预览播放</li>
            </ul>
          </div>

          <div class="bg-white rounded-lg shadow-sm p-6">
            <h3 class="text-xl font-semibold text-gray-900 mb-4">
              <i class="fab fa-html5 text-orange-500 mr-2"></i>
              HTML 网页
            </h3>
            <p class="text-gray-600 mb-4">
              将 Markdown 转换为美观的 HTML 网页。
            </p>
            <ul class="text-sm text-gray-600 space-y-2">
              <li>• 响应式设计</li>
              <li>• 语法高亮支持</li>
              <li>• 自定义样式</li>
              <li>• 一键复制代码</li>
            </ul>
          </div>
        </div>

        <div class="mt-12 bg-blue-50 rounded-lg p-8">
          <h2 class="text-2xl font-bold text-blue-900 mb-4">
            <i class="fas fa-lightbulb mr-2"></i>
            使用技巧
          </h2>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6 text-blue-800">
            <div>
              <h4 class="font-semibold mb-2">快捷键</h4>
              <ul class="text-sm space-y-1">
                <li>• <kbd class="px-2 py-1 bg-blue-100 rounded">Ctrl + S</kbd> 保存内容</li>
                <li>• <kbd class="px-2 py-1 bg-blue-100 rounded">Ctrl + Z</kbd> 撤销操作</li>
                <li>• <kbd class="px-2 py-1 bg-blue-100 rounded">F11</kbd> 全屏模式</li>
              </ul>
            </div>
            <div>
              <h4 class="font-semibold mb-2">最佳实践</h4>
              <ul class="text-sm space-y-1">
                <li>• 使用清晰的标题层级</li>
                <li>• 保持内容结构简洁</li>
                <li>• 定期保存工作内容</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 帮助页面组件
</script> 